In this blog I am trying to make a small demo related to WebGrid, which is able to add a new blank row and after that fill that blank row and save in the database table. In WebGrid you don’t add a new row it’s done only with the help of trick below I provide you my sample code for add new Row in WebGrid.
Getting start: -
1. Open a Visual Studio 2012 and create a blank new project.
2. Then add a new ADO.NET Entity Data Model with DemoEntities named. (if you don’t have any knowledge about how to add a ADO.NET Entity Data Model in MVC application then read How to add ADO.NET Entity Data Model in MVC4 article)
My Sql Table Structure
USE [DEMO]
CREATE TABLE [dbo].[tblCustomerInformation](
[CustomerName] [varchar](100) NULL,
[CustomerAge] [int] NULL,
[CustomerContact] [varchar](50) NULL,
[CustomerAddress] [varchar](200) NULL,
[CustomerId] [int] IDENTITY(1,1) NOT NULL
)
Then Write Code in HomeController
DEMOEntity dEntity = new DEMOEntity();
public ActionResult Index()
{
return View(dEntity.tblCustomerInformation.ToList());
}
[HttpPost]
public ActionResult Index(tblCustomerInformation tb,IEnumerable<DynamicTable.Models.tblCustomerInformation> s) {
if (tb.CustomerName != null)
{
dEntity.tblCustomerInformation.Add(tb);
dEntity.SaveChanges();
}
return View(dEntity.tblCustomerInformation.ToList());
}
ThenCreate a view where we use the WebGrid
@model IEnumerable<DynamicTable.Models.tblCustomerInformation>
@using (Html.BeginForm("Index", "Home", FormMethod.Post, new { @id = "WebGridForm" })) {
@Html.AntiForgeryToken()
@Html.EditorForModel()
<table>
<tr>
<td> <table>
<tr>
@dataGrid.GetHtml(tableStyle: "grid", columns: dataGrid.Columns( dataGrid.Column("CustomerName",format: @<text>@item.CustomerName</text>), dataGrid.Column("CustomerAge",format: @<text>@item.CustomerAge</text>), dataGrid.Column("CustomerContact",format: @<text>@item.CustomerContact</text>), dataGrid.Column("CustomerAddress",format: @<text>@item.CustomerAddress</text>) ))
</tr> <tr>
<td colspan="4">
<div style="display: none" id="divAddRow">
@{
tblCustomerInformation t = new tblCustomerInformation(); }
@Html.Partial("_addDynTable", t)
</div>
</td>
</tr>
<tr>
<td>
<input type="button" value="Add Contact" id="ClickToAdd" /><input type="submit" value="Save" /></td> <td>
</td>
</tr>
</table>
<div>
<div>
</div>
<div>
</div>
</div>
</td> </tr>
</table>
}
Note: - In above lines of code highlight with green highlighter is section of calling partial view.
Then create a partial view with _addDynTablename
@model DynamicTable.Models.tblCustomerInformation
<table>
<tr>
<td>
@Html.TextBoxFor(m=>m.CustomerName)
</td>
<td>
@Html.TextBoxFor(m=>m.CustomerAge)
</td>
<td>
@Html.TextBoxFor(m=>m.CustomerContact)
</td>
<td>
@Html.TextBoxFor(m=>m.CustomerAddress)
</td>
</tr>
</table>
Note I’m using a trick when application load is first time then entire table data will show but after clicking on Add Contactbutton add a new row in the bottom of the Gird actually I’m using a Partial view in a div and its display set by default none when I click on Add Contactthen It’s Display set the block with the help of jQuery below I provide you a jQuery Code: -
<script type="text/javascript">
$('#ClickToAdd).click(function () {
$("#divAddRow").css("display", "block");
})
</script>
Leave Comment